<template>
  <div class="bread">
    <!-- 面包屑 -->
    <a-breadcrumb class="head-bread">
      <a-breadcrumb-item v-for="item in breadLink">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "bread",
  props: {
    breadLink: {
      required: true,
      type: Array,
      default: () => [
        {path: "/", name: ""},
      ]
    },
    handle: {
      required: false,
      type: Function,
      default: function () {

      }
    },
    back: {
      required: false,
      type: Function,
      default: function () {
        window.history.go(-1);
      }
    }
  },
}
</script>

<style scoped lang="less">
  .bread {
    background-color: #fff;
    padding: 8px 24px 7px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .ant-btn {
      margin-left: 8px;
    }

    .head-bread {
      margin-right: auto;
    }

    a {
      color: rgba(0, 0, 0, 0.45);
    }

    .ant-breadcrumb-link {
      color: rgba(0, 0, 0, 0.65);
    }
  }
</style>
